<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重写Vue2源码的数据劫持</title>
</head>
<body>
  
  <script src="dist/umd/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      // data: {
      //   title: '这是另一种数据格式(不推荐)'
      // },
      data() {
        return {
          title: 'Vue2的数据劫持',
          personNum: 1,
          friends: [ '张三', '李四' ], // 因为vue2的数组响应式下标不更新，这里不做处理
          total: 3,
          info: {
            a: {
              b: 1
            }
          },
          hobby: [
            {
              id: 1,
              name: '学习'
            },
            {
              id: 2,
              name: '旅游'
            }
          ]
        }
      }
    })

    // console.log(vm);
    // console.log(vm.$data.title);
    // console.log(vm.title);
    // vm.title = '这是修改后的数据'
    // console.log(vm.title);

    // console.log(vm.friends);
    // vm.friends[1] = '这是修改后的数据'
    // console.log(vm.friends[1]);

    // console.log(vm.hobby);
    // console.log(vm.hobby[0]);
    // vm.hobby.push({
    //   id: 3,
    //   name: '跑步'
    // })
    // console.log(vm.hobby);

    // console.log(vm.hobby.splice(0, 1, {
    //   id: 0,
    //   name: '小白'
    // }));
    // console.log(vm.hobby);

    // console.log(vm.info.a.b);
    // console.log(vm.info.a = {
    //   c: 4
    // });

  </script>
</body>
</html>